<template>
	<view class="from">
		<u-form :model="form" ref="uForm">
			<u-form-item label="姓名" prop="name">
				<u-input v-model="form.name" placeholder="请输入姓名" />
			</u-form-item>
			<u-form-item label="密码" prop="password">
				<u-input v-model="form.password" type="password" placeholder="请输入密码" />
			</u-form-item>
			<u-form-item label="手机" prop="phonenumber" style=' width: 100%;'>
				<u-input v-model="form.phonenumber" placeholder="请输入手机号" style='width: 70%;float: left; ' />
				<view :class="status == 1? 'before-style': 'after-style'" @tap="getVerifyCode">{{tips}}</view>
				<u-toast ref="uToast"></u-toast>
				<u-verification-code start-text="发送验证码" change-text="Xs" :seconds="seconds" @end="end" @start="start"
					ref="uCode" @change="codeChange"></u-verification-code>
			</u-form-item>
			<u-radio-group v-model="sex" @change="radioGroupChange">
				<u-radio @change="radioChange" v-for="(item, index) in list" :key="index" :name="item.name"
					:disabled="item.disabled">
					{{item.name}}
				</u-radio>
			</u-radio-group>
			<u-message-input :maxlength="4" @finish="finish"></u-message-input>
		</u-form>

		<u-button @click="submit">提交</u-button>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				form: {
					name: '',
					password: '',
					phonenumber: '',
					sssssss: ''
				},
				rules: {
					name: [{
						required: true,
						message: '请输入姓名',
						trigger: ['change', 'blur'],
					}],
					password: [{
						min: 5,
						max: 15,
						pattern: /^[0-9a-zA-Z]*$/g,
						transform(value) {
							return String(value);
						},
						message: '密码只能是数字加字母，长度在5-15之间',
						trigger: ['change', 'blur']
					}, ],
					phonenumber: [{
							required: true,
							message: '请输入手机号',
							trigger: ['change', 'blur'],
						},
						{
							validator: (rule, value, callback) => {
								this.form.sssssss = this.$u.test.mobile(value)
								return this.$u.test.mobile(value);
							},
							message: '手机号码不正确',
							trigger: ['change', 'blur'],
						}
					]
				},
				tips: '',
				seconds: 60,
				status: 1,
				list: [{
						name: '男',
						disabled: false
					},
					{
						name: '女',
						disabled: false
					},
				],
				sex: '男',
				result: '',
				submita:''
			};
		},
		methods: {
			radioChange(e) {
				console.log(e);
			},
			radioGroupChange(e) {
				console.log(e);
			},
			submit() {
				if(this.submita == true){}
				this.$refs.uForm.validate(valid => {
					if (valid) {
						if(this.submita == true){
							console.log('验证通过');
						}
					} else {
						console.log('验证失败');
					}
				});
			},
			//验证码
			codeChange(text) {
				this.tips = text;
			},
			getVerifyCode() {
				if (this.form.phonenumber == '' || this.form.sssssss == false) {
					this.$refs.uToast.show({
						title: '请输入正确的手机号码！！！！！',
						type: 'error',
						position: 'top'
					})
				} else {
					console.log(this.form.sssssss)
					if (this.$refs.uCode.canGetCode) {
						// 模拟向后端请求验证码
						uni.showLoading({
							title: '正在获取验证码'
						})
						setTimeout(() => {
							uni.hideLoading();
							// 这里此提示会被this.start()方法中的提示覆盖
							this.$u.toast('验证码已发送');
							// 通知验证码组件内部开始倒计时
							this.$refs.uCode.start();
							//生成随机验证码
							var str = "1234567890";
							var arr = str.split("");
							var result = "";
							for (var i = 0; i < 4; i++) {
								var n = Math.floor(Math.random() * arr.length);
								result += arr[n];
								this.result = result
							}
							this.$refs.uToast.show({
								title: result,
								type: 'primary ',
								position: 'top'
							})
						}, 2000);
					} else {
						this.$u.toast('倒计时结束后再发送');
					}
				}

			},
			end() {
				this.status = 1
				// this.$u.toast('倒计时结束');
			},
			start() {
				this.status = 2
				// this.$u.toast('倒计时开始');
			},
			//验证码 验证
			finish(e) {
				if (this.result == e){
					this.$refs.uToast.show({
						title: '验证成功',
						type: 'primary ',
						position: 'top',
					})
					this.submita = true
				}else{
					this.$refs.uToast.show({
						title: '验证失败',
						type: 'warning ',
						position: 'top'
					})
					this.submita = false
				}
				
			},
		},
		// 必须要在onReady生命周期，因为onLoad生命周期组件可能尚未创建完毕
		onReady() {
			this.$refs.uForm.setRules(this.rules);
		}
	};
</script>

<style lang="scss" scoped>
	.from {
		margin: 10rpx 50rpx 40rpx 30rpx;

		.before-style {
			background: #007AFF;
			width: 30%;
			height: 50rpx;
			color: #fff;
			float: left;
			line-height: 50rpx;
			text-align: center;
			border: none;
			margin-top: 15rpx;
			border-radius: 10rpx;
		}

		.after-style {
			background: #C0C4CC;
			width: 30%;
			height: 50rpx;
			color: #fff;
			line-height: 50rpx;
			text-align: center;
			border: none;
			float: left;
			margin-top: 15rpx;
			border-radius: 10rpx;
		}
	}
</style>
